import { Suspense, useEffect } from 'react'
import { Outlet, Router, RouterProvider, useLocation, useNavigate, useRoutes } from 'react-router-dom'
// import { Spin } from 'antd'
// import { useAppSelector } from './store'
import routes from '@/router/index.tsx'
import { TransitionGroup, CSSTransition } from "react-transition-group"
import authRoute from '@/router/AuthRouter'

function App() {
	// const { loading } = useAppSelector((state: any) => state.layoutStore)
	const navigator = useNavigate()
	const location = useLocation()
	const goToPage = (url: string) => {
		navigator(url)
	}
	useEffect(() => {
		authRoute(location.pathname, navigator)
	}, [location.pathname])
	return (
		<>
			{/* <Spin spinning={loading} fullscreen /> */}
			<ul>
				<li onClick={() => goToPage('/login')}>login</li>
				<li onClick={() => goToPage('/error-page')}>error-page</li>
				<li onClick={() => goToPage('/index')}>index</li>
				<li onClick={() => goToPage('/index/about')}>about</li>
			</ul>
			<TransitionGroup component={null}>
				<CSSTransition key={location.key} classNames="fade" timeout={100}>
					<Suspense fallback="">
						<div className="main">
							{/* {useRoutes(AuthRoute(routes))} */}
							{useRoutes(routes)}
						</div>
					</Suspense>
				</CSSTransition>
			</TransitionGroup>
		</>
	)
}

export default App
